<template>
    <el-card style="position: relative">
      <div class="plus-char">
        <a @click="addNote">
          &#43;
        </a>
      </div>
      <div class="calendar-div">
        <div>
          <Calendar
            ref="Calendar"
            :markDate="arr"
            :sundayStart="true"
            v-on:choseDay="clickDay"
            v-on:changeMonth="changeDate"
          ></Calendar>
        </div>
        <div class="note-box">
          <el-row v-for="(item, index) in marqueeList" v-if="item.ugent >= 0" class="note-record">
            <el-col :span="6">{{item.date}}</el-col>
            <el-col  :span="18" :class="{red:item.ugent >= 2}">
              <a @click="gotoNote(item.id)" >{{item.note}}</a>
            </el-col>
          </el-row>
<!--          <ul>-->
<!--            <li v-for="(item, index) in marqueeList">-->
<!--              <span>{{item.date}}&nbsp;</span>-->
<!--              <span class="red">{{item.note}}</span>-->
<!--            </li>-->
<!--          </ul>-->
        </div>
<!--        <div class="marquee_box">-->
<!--          <ul class="marquee_list" :class="{marquee_top:animate}">-->
<!--            <li v-for="(item, index) in marqueeList">-->
<!--              <span>{{item.date}}&nbsp;</span>-->
<!--              <span class="red">{{item.note}}</span>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->
      </div>
<!--      默认是周一开始 当是true的时候 是周日开始-->
    </el-card>
</template>

<script>
import resize from './mixins/resize'
import Calendar from 'vue-calendar-component'

export default {
  mixins: [resize],
  props: {
    noteData: {
      type: Array,
      required: true
    }
  },
  components: {
    Calendar
  },
  data() {
    return {
      animate: false,
      chart: null,
      // arr: [{date:'2020/6/1',className:"mark1"}, {date:'2020/6/13',className:"mark2"}],
      arr: [ "2020/6/2", "2020/6/24"],
      marqueeList: [
        {
          id: 1,
          date: '2020/6/1',
          note: '北京国际研讨会行程北京国际讨会行程北京国际研讨会行程讨会行程北京国际研讨会行程研讨会行程',
          ugent: 1
        },
        {
          id: 2,
          date: '2020/6/10',
          note: '上海国际研讨会行程',
          ugent: 2
        },
        {
          id: 3,
          date: '2020/6/24',
          note: '北上广深国际研讨会行程国际研讨会行程',
          ugent: 3
        },
        {
          id: 4,
          date: '2020/6/24',
          note: '北上广深国际研讨会行程国际研讨会行程',
          ugent: 3
        },
        {
          id: 5,
          date: '2020/6/24',
          note: '北上广深国际研讨会行程国际研讨会行程',
          ugent: 3
        }],
    }
  },
  watch: {
  },
  computed: {
  },
  created() {
    // setInterval (this.scroll, 5000)
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    // tab 切换时, 动态的切换路由
    clickDay(data) {
      console.log(data); //选中某天
    },
    changeDate(data) {
      console.log(data); //左右点击切换月份
    },
    clickToday(data) {
      console.log(data); //跳到了本月
    },
    addNote() {
      console.log('showall')
    },
    gotoNote(id) {
      console.log(id)
    },
    scroll: function () {
      this.animate = true;
      setTimeout (() => {
        this.marqueeList.push (this.marqueeList[0]);
        this.marqueeList.shift ();
        this.animate = false;
      }, 1000);
    }
  }
}
</script>

<style lang="scss" scoped>
  .plus-char {
    position: absolute;left:15px;top:8px;
    color: dodgerblue;
    font-weight: 600;
    font-size: 36px;
  }
  .mark1 {

  }
  .mark2 {

  }
  .wh_container >>> .wh_top_changge {
    margin-right: 10px;
  }
  .wh_container >>> .wh_content_all{
    background-color:#ffffff!important;
    border:0px solid #dfe0e6;
  }
  .wh_container{
    margin: 0px!important;
  }

  .wh_container >>> .wh_item_date{
    color:#211d48;

  }
  .wh_container >>> .wh_item_date:hover{
    color:#ffffff;
    background: #136aa7;
    border-radius: 50%;
  }
  .wh_container >>>  .wh_other_dayhide{
    color:#cccccc;
  }
  .wh_content >>> .wh_top_tag{
    margin: 0;
  }
  .wh_container >>> .wh_content_item{
    margin-bottom: 1px;
    margin-top: 1px;
    width: 40px;
    height: 40px;
  }

  .wh_container >>> .wh_content{
    color:black;
  }

  .wh_container >>> .wh_top_tag{
    color:black;
  }
  .wh_container >>> .wh_content_li{
    color:#162947;
    font-weight: bold;
  }
  .wh_container >>> .wh_jiantou1{
    border-top: 2px solid dodgerblue;
    border-left: 2px solid dodgerblue;
  }
  .wh_container >>> .wh_jiantou2{
    border-top: 2px solid dodgerblue;
    border-right: 2px solid dodgerblue;
  }

  .wh_container >>> .wh_top_changge li {
    width: auto;
    height: 35px;
  }

  .wh_container >>> .wh_content_item>.wh_isMark{
    background-color: rgba(19,105,167,0.15);
    /*border-radius: 0px;*/
  }
  .wh_container >>> .wh_content_item .wh_isToday{
    background-color: rgba(19,105,167,1);
    /*border-radius: 0px;*/
    color: #ffffff;
  }
  .wh_container >>> .wh_content_item .wh_chose_day{
    background-color: rgba(19,105,167,1);
    /*border-radius: 0px;*/
    color: #ffffff;
  }
  .wh_container >>> .wh_item_date{
    width: 40px;
    height: 40px;
  }

  .calendar-div {
    margin: auto;
    width: 310px;
    height: 360px;
  }

  .note-box {
    width: 100%;
    font-size: 14px;
  }
  .note-record {
    padding-top: 5px;
    /*-webkit-line-clamp:2;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
    /*-webkit-box-orient: vertical;*/
    /*white-space: nowrap;*/
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
  }

  .marquee_box {
    * {
      margin: 0;
      padding: 0;
    }
    display: block;
    position: relative;
    width: 100%;
    height: 50px;
    overflow: hidden;
    white-space: nowrap;
  }

  .marquee_list {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }

  .marquee_top {
    transition: all 2s;
    margin-top: -30px;
  }

  .marquee_list ul {
    padding-inline-start: 0px;
  }

  .marquee_list li {
    display: table;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    padding-left: 0px;
  }

  .marquee_list li span {
    padding: 0 2px;
  }

  .red {
    color: #FF0101;
  }

  @media (max-width:1100px) {
    .wh_container >>> .wh_content_item{
       margin-bottom: 1px;
       margin-top: 1px;
       width: 28px;
       height: 28px;
     }
    .wh_container >>> .wh_top_tag{
      color:black;
      width: 26px;
      height: 26px;
    }
    .wh_container >>> .wh_item_date{
      width: 26px;
      height: 26px;
    }
    .calendar-div {
      width: 220px;
      height: 240px;
    }
    .note-box {
      width: 105%;
    }
    .note-record {
      padding-top: 5px;
      font-size: 12px;
      /*white-space: nowrap;*/
      /*overflow: hidden;*/
      /*text-overflow: ellipsis;*/
    }
  }
</style>
